<template>
  <div style="height: auto;" class="continer">
    <div class="header">
        <div>
                <el-button @click="$router.back()" type="primary" link><span style="font-size: larger;">首 页</span> </el-button>
            </div>
    </div>
    <div class="main">
        
        <div class="infoimg">
            <div class="img">
                <img style="height: 100%;" :src="bk?.bookPic" alt="">
            </div>
            <div class="info">
                <div class="i">书名：{{bk?.bookName}}</div>
                <div class="i">类别：{{bk?.bookClassName}}</div>
                <div class="i">出版：{{bk?.publisher}}</div>
                <div class="i">作者：
                  
                 <span v-for="item in  bk?.authors"> {{ item.name + "  "}}</span>
                
                </div>
                <div class="i"> 
                    数量：
                    <el-input-number v-model="num" :min="1" :max="100" @change="handleChange" />
                </div>
                <div class="i"  >价格：{{ bk?.price as number * num }}</div>
                <div class="i"> <ElButton @click="addTrolley">加入购物车</ElButton> <ElButton @click="dialogVisible = true">购买</ElButton> </div>
            </div>
        </div>
        <div class="des">
            <div style="border-radius: 10px; background-color: aliceblue;">详细信息</div>
            <div  v-html="bk?.infor"></div>
        </div>
    </div>
  </div>
  <div style="margin-top: 120px;">
    <div  v-for="item in commendList" class="commends">
  <div>用户： {{ item.createItme }}  {{item.userName }}   -评分   <el-rate
    v-model="item.star"
    disabled
    text-color="#ff9900"
    score-template="{value} points"
  /> </div>
  <hr>
  <div v-html="item.msg"></div>
<p></p>
</div>

  </div>







  <el-dialog
    v-model="dialogVisible"
    title="订单"
    width="30%"
    
  >
    <div>
        <div>书名：{{ bk?.bookName }}</div>
        <div>数量：{{ num }}</div>
        <div>送货地址： {{ store.getUser()?.shippingAddress }}</div>
        <div>价格： {{ bk?.price as number * num }}</div>
        <div></div>
        <div></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="send">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { ElButton, ElMessage } from 'element-plus';
import {ref} from 'vue'
import { useRoute } from 'vue-router';
import {selectById } from '../api/Book'
import {addTrolleyApi} from '../api/Trolley'
import type {Book} from '../modle/Book'
import { useCounterStore } from '@/stores/counter';
import { ElMessageBox } from 'element-plus'
import {order} from '../api/User'
import { getByBookId } from '@/api/bookMsg'

const dialogVisible = ref(false)
const abc = ref('<hr/>')
const store = useCounterStore()





const send = () => {
    order(store.getUser()?.userName as string,route.query.id,num.value).then(res => {
      if(res.data.code === 200) {
        ElMessage({
          message:'下单成功',
          type:'success'
        })
        dialogVisible.value = false
      } else {
        ElMessage({
          message:res.data.data,
          type:'error'
        })
      }
    })
}
const addTrolley = () =>{
  addTrolleyApi(route.query.id,store.getUser()?.userName as string,num.value).then ( res =>{
    res.data.code === 200 && ElMessage({
      message:'成功',
      type:'success'
    })
  })
}
const num = ref(1)
const handleChange = (value: number) => {
  console.log(value)
}
const route = useRoute()
console.log(route.query);

const bk = ref<Book>()


  const commendList = ref()

  getByBookId(route.query.id as string).then(res => {
    console.log(res.data.data);
    commendList.value = res.data.data
  })


selectById(route.query.id).then(res => {
    console.log(res.data);
    bk.value = res.data.data
})

if(route.query.refresh as unknown as number === 1) {
  selectById(route.query.id).then(res => {
    console.log(res.data);
    bk.value = res.data.data
})
}


</script>

<style scoped >
.continer {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header {
    height: 10%;
}
.main {
    flex:1;
}
.infoimg {
    display: flex;
    margin: 0 auto;
    width: 80%;
    height: auto;
    justify-content:start;

}
.img {
height: 450px;
width: 300px;
overflow: hidden;
border-radius: 20px;
}
.info {
    height: auto;
     margin-left: 5%;

}
.i {
    margin-top: 30%;
}
.commends{
  width: 60%;
  background-color: rgb(231, 231, 231);
  margin: 0 auto;
  border-radius: 10px;
  padding-left: 10px;
}
</style>